<template>
  <div :class="prefixCls">
    <Tabs v-bind="getTabValues" @on-click="handlePane" :class="[prefixCls + (verify ? '-verify' : '')]">
      <TabPane v-for="(tab, index) in tabList" :key="tab.name" v-bind="getPaneValues(tab, index)">
        <slot :name="tab.name" :tab="tab" />
      </TabPane>
      <template #extra>
        <Button v-if="showReturn" @click="onBack">返回</Button>
        <slot name="extra" />
      </template>
    </Tabs>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue';
import { useRouter } from 'vue-router';
import { useTabs } from './utils/useTabs';
import { useType } from '../../utils/useType';

const prefixCls = 'sh-tabs';
const attrs = useAttrs();
const router = useRouter();

const emit = defineEmits(['pane-click']);
const props = defineProps({
  tabList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  hasIcon: {
    type: Boolean,
    default: false,
  },
  verify: {
    type: Boolean,
    default: false,
  },
  animated: {
    type: Boolean,
    default: false,
  },
  showReturn: {
    type: Boolean,
    default: false,
  },
  returnCallback: {
    type: Function,
  },
});

const { getTabValues, getPaneValues } = useTabs(props, attrs);

const { isType } = useType();

const handlePane = name => {
  emit('pane-click', name);
};

const onBack = () => {
  if (isType(props.returnCallback, 'Function')) {
    props.returnCallback();
  } else {
    router.back();
  }
};
</script>
